<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title><%= htmlWebpackPlugin.options.title %></title>
  <style>

  </style>
</head>
<body>
  <div style="display: none;">
    <div class="explain">flex-direction: row;</div>
    <div class="box1">
      <% for(let i = 0; i < 10; i++){ %>
        <div class="item"><%=i+1%></div>
      <% } %>
    </div>
    <div class="explain">flex-direction: row-reverse;</div>
    <div class="box2">
      <% for(let i = 0; i < 10; i++){ %>
        <div class="item"><%=i+1%></div>
      <% } %>
    </div>
    <div class="explain">flex-direction: column;</div>
    <div class="box3">
      <% for(let i = 0; i < 10; i++){ %>
        <div class="item"><%=i+1%></div>
      <% } %>
    </div>
    <div class="explain">flex-direction: column-reverse;</div>
    <div class="box4">
      <% for(let i = 0; i < 10; i++){ %>
        <div class="item"><%=i+1%></div>
      <% } %>
    </div>    
  </div>

  <!-- flex-wrap -->
  <div style="display: none;">
    <div class="explain">flex-wrap: nowrap;</div>
    <div class="box5">
      <% for(let i = 0; i < 30; i++){ %>
        <div class="item"><%=i+1%></div>
      <% } %>
    </div>
    <div class="explain">flex-wrap: wrap;</div>
    <div class="box6">
      <% for(let i = 0; i < 10; i++){ %>
        <div class="item"><%=i+1%></div>
      <% } %>
    </div>
    <div class="explain">flex-wrap: wrap-reverse;</div>
    <div class="box7">
      <% for(let i = 0; i < 10; i++){ %>
        <div class="item"><%=i+1%></div>
      <% } %>
    </div>    
  </div>
  
  <!-- justify-content -->
  <div style="display: none;">
    <div class="explain">justify-content: flex-start;</div>
    <div class="box8">
      <% for(let i = 0; i < 4; i++){ %>
        <div class="item"><%=i+1%></div>
      <% } %>
    </div>
    <div class="explain">justify-content: flex-end;</div>
    <div class="box9">
      <% for(let i = 0; i < 4; i++){ %>
        <div class="item"><%=i+1%></div>
      <% } %>
    </div>
    <div class="explain">justify-content: center;</div>
    <div class="box10">
      <% for(let i = 0; i < 4; i++){ %>
        <div class="item"><%=i+1%></div>
      <% } %>
    </div>
    <div class="explain">justify-content: space-between;</div>
    <div class="box11">
      <% for(let i = 0; i < 4; i++){ %>
        <div class="item"><%=i+1%></div>
      <% } %>
    </div>
    <div class="explain">justify-content: space-around;</div>
    <div class="box12">
      <% for(let i = 0; i < 6; i++){ %>
        <div class="item"><%=i+1%></div>
      <% } %>
    </div>
  </div>

  <!-- align-content -->
  <div style="display: none;">
    <div class="explain">align-content: flex-start;</div>
    <div class="box13">
      <% for(let i = 0; i < 10; i++){ %>
        <div class="item"><%=i+1%></div>
      <% } %>
    </div>
    <div class="explain">align-content: flex-end;</div>
    <div class="box14">
      <% for(let i = 0; i < 10; i++){ %>
        <div class="item"><%=i+1%></div>
      <% } %>
    </div>
    <div class="explain">align-content: center;</div>
    <div class="box15">
      <% for(let i = 0; i < 10; i++){ %>
        <div class="item"><%=i+1%></div>
      <% } %>
    </div>
    <div class="explain">align-content: space-between;</div>
    <div class="box16">
      <% for(let i = 0; i < 10; i++){ %>
        <div class="item"><%=i+1%></div>
      <% } %>
    </div>
    <div class="explain">align-content: space-around;</div>
    <div class="box17">
      <% for(let i = 0; i < 10; i++){ %>
        <div class="item"><%=i+1%></div>
      <% } %>
    </div>
    <div class="explain">align-content: stretch;</div>
    <div class="box18">
      <% for(let i = 0; i < 10; i++){ %>
        <div class="item"><%=i+1%></div>
      <% } %>
    </div>
  </div>
  <!-- order -->
  <div style="display:block;">
    <div class="box19">
      <div class="item" style="order: 7">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item" style="order: -1">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
    </div>    
  </div>
  <!-- flex-grow -->
  <div style="display: none;">
    <div class="box19">
      <div class="item" style="flex-grow: 10">1</div>
      <div class="item" style="flex-grow: 6">2</div>
      <div class="item" style="flex-grow: 2">3</div>
      <div class="item" style="flex-grow: 1">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item" style="flex-grow: 1">7</div>
    </div>    
  </div>
  <div style="display: none;">
      <div class="explain">align-items: flex-start;</div>
      <div class="box20">
        <div class="item" style="height: 10px;line-height: 10px;">1</div>
        <div class="item" style="height: 30px;line-height: 30px;">2</div>
        <div class="item" style="height: 30px;line-height: 30px;">3</div>
        <div class="item" style="height: 20px;line-height:20px;">4</div>
      </div>
      <div class="explain">align-items: flex-end;</div>
      <div class="box21">
        <div class="item" style="height: 10px;line-height: 10px;">1</div>
        <div class="item" style="height: 30px;line-height: 30px;">2</div>
        <div class="item" style="height: 30px;line-height: 30px;">3</div>
        <div class="item" style="height: 20px;line-height:20px;">4</div>
      </div>
      <div class="explain">align-items: center;</div>
      <div class="box22">
        <div class="item" style="height: 10px;line-height: 10px;">1</div>
        <div class="item" style="height: 30px;line-height: 30px;">2</div>
        <div class="item" style="height: 30px;line-height: 30px;">3</div>
        <div class="item" style="height: 20px;line-height:20px;">4</div>
      </div>
      <div class="explain">align-items: baseline;</div>
      <div class="box23">
        <div class="item" style="height: 10px;line-height: 10px;">1</div>
        <div class="item" style="height: 30px;line-height: 30px;">2</div>
        <div class="item" style="height: 30px;line-height: 30px;">3</div>
        <div class="item" style="height: 20px;line-height:20px;">4</div>
      </div>
      <div class="explain">align-items: stretch;</div>
      <div class="box24">
        <div class="item" style="height: 10px;line-height: 10px;">1</div>
        <div class="item" style="height: 30px;line-height: 30px;">2</div>
        <div class="item" style="height: 30px;line-height: 30px;">3</div>
        <div class="item" style="height: 20px;line-height:20px;">4</div>
      </div>                        
  </div>
</body>
</html>
